<template>
	<view class="nav">
		<!-- <view class="nav-left" @click="Navpopup">
			<image src="@/static/img/indexImg/icon-san.png" mode=""></image>
		</view> -->
		<view class="nav-center">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" @click="click" lineColor="#f72647" lineWidth="60rpx" lineHeight="4rpx"
					:activeStyle="{
						color:'#323232',
						fontWeight:'600',
					}"></u-tabs>
			</u-sticky>
		</view>
		<!-- <view class="nav-right" @click="seek">
			<image src="@/static/img/indexImg/seek.png" mode="" @click="seek"></image>
		</view> -->
		<!-- <view class="LeftPopup">
			<u-popup :show="LeftPopup" mode="left" @close="close">
				<sidebar></sidebar>
			</u-popup>
		</view> -->

		<attention v-if="attention"></attention>

		<find v-if="find"></find>

		<!-- <find v-if="nearby"></find> -->
	</view>
</template>

<script>
	// import sidebar from '@/components/sidebar.vue';
	import attention from '@/components/attention.vue'
	import find from '@/components/find.vue'
	export default {
		components: {
			// sidebar,
			attention,
			find
		},
		data() {
			return {
				list: [{
						name: "送礼记录"
					},
					{
						name: "收礼记录"
					}
				],
				current: 1,
				LeftPopup: false,
				attention: false,
				find: true,
				// nearby: false
			}
		},
		onLoad() {

		},
		methods: {
			click(e) {
				console.log(e.index);
				if (e.index == 0) {
					this.attention = true;
					this.find = false;
					// this.nearby = false;
				} else if (e.index == 1) {
					this.find = true;
					this.attention = false;
					// this.nearby = false;
				}
			},
			Navpopup() {
				this.LeftPopup = !this.LeftPopup
			},
			close() {
				this.LeftPopup = !this.LeftPopup
			},
		}
	}
</script>

<style scoped>
	.nav {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.nav-right,
	.nav-left {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-left image {
		width: 40%;
		height: 67%;
		object-fit: cover;
		object-position: center;

	}

	.nav-center {
		width: 60%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-right image {
		width: 35%;
		height: 60%;
		object-fit: cover;
		object-position: center;
	}
</style>